<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root1">
    <h2>显示格式化时间</h2>
    <!--computed-->
    <h3>现在是：{{timeFmt}}</h3>
    <!--methods-->
    <h3>现在是：{{getTimeFmt()}}</h3>
    <!--过滤器实现-->
    <h3>1.现在是：{{time | timeFormater}}</h3>
    <h3>2.现在是：{{time | timeFormater("YYYY_MM_DD")}}</h3>
    <h3>3.现在是：{{time | timeFormater("YYYY_MM_DD") | mySlice}}</h3>
    <button @click="printVue">打印Vue</button>
</div>
<hr>
<div id="root2">
    <h2>{{msg | mySlice}}</h2>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    // 全局过滤器
    Vue.filter('mySlice', function (val) {
        return val.slice(0, 4);
    });

    const vm1 = new Vue({
        el: '#root1',
        data() {
            return {
                time: 1652124031378
            }
        },
        computed: {
            timeFmt() {
                return dayjs(this.time).format('YYYY年M月D日 HH:mm:ss');
            }
        },
        methods: {
            getTimeFmt(e) {
                return dayjs().format('YYYY年M月D日 HH:mm:ss');
            },
            printVue(e){
                console.dir(Vue);
            }
        },
        watch: {},
        //局部过滤器
        filters: {
            timeFormater(val, fmt = 'YYYY年M月D日 HH:mm:ss') {
                return dayjs(val).format(fmt);
            },
            /*mySlice(val) {
                return val.slice(0, 4);
            }*/
        }
    });
    const vm2 = new Vue({
        el: '#root2',
        data(){
            return {
                msg:"Hello, World!"
            }
        },
        computed:{

        },
        methods:{

        },
        watch:{

        }
    });
</script>
</html>